<template>
  <div class="main">
    <div class="banner">
      <HomeSwiper
        :imgs="[
          publicUrl('/images/banner1.jpg'),
          publicUrl('/images/attract-shop.jpg'),
          publicUrl('/images/banner3.jpg'),
        ]"
      />
    </div>
    <div class="main-content">
      <Menu
        :menu-list="menuList"
        :def-active-name="defAtiveName"
        show-search
        :select-list="resultJson"
        @top-change="topChange"
      />
      <div class="content">
        <router-link :to="`/material/detail?material_id=1`" class="part"
          ><Section
        /></router-link>
        <router-link :to="`/material/detail?material_id=1`" class="part"
          ><Section
        /></router-link>
        <router-link :to="`/material/detail?material_id=1`" class="part"
          ><Section
        /></router-link>
        <router-link :to="`/material/detail?material_id=1`" class="part"
          ><Section
        /></router-link>
        <router-link :to="`/material/detail?material_id=1`" class="part"
          ><Section
        /></router-link>
        <router-link :to="`/material/detail?material_id=1`" class="part"
          ><Section
        /></router-link>
        <router-link :to="`/material/detail?material_id=1`" class="part"
          ><Section
        /></router-link>
        <div class="part"></div>
        <div class="part"></div>
        <div class="part"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { publicUrl } from "@/utils/util";
import HomeSwiper from "@/components/HomeSwiper/index.vue";
import Menu from "@/components/Menu/index.vue";
import Section from "./components/Section/index.vue";
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import all from "@/json/all.json";
import copywriting from "@/json/copywriting.json";
import image from "@/json/image.json";
import video from "@/json/video.json";

interface MenuList {
  title: string;
  params?: {
    path: string;
  };
}
const route = useRoute();
const router = useRouter();
const path = computed((): string => route.path);
const defAtiveName = ref<number>(0);
const resultJson = computed(() => {
    switch (path.value) {
    case "/material/all":
        defAtiveName.value = 0;
        return all;
    case "/material/image":
        defAtiveName.value = 1;
        return image;
    case "/material/video":
        defAtiveName.value = 2;
        return video;
    case "/material/copywriting":
        defAtiveName.value = 3;
        return copywriting;
    }
});

const menuList = ref<Array<MenuList>>([
    { title: "全部素材", params: { path: "/material/all" } },
    { title: "图片素材", params: { path: "/material/image" } },
    { title: "视频素材", params: { path: "/material/video" } },
    { title: "文案素材", params: { path: "/material/copywriting" } },
]);

const topChange = (item: MenuList) =>
    item.params ? router.push(item.params.path) : "";
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
